{% extends "base.html" %}
{% load wger_extras %}
{% load i18n %}
{% load static %}

{% block title %}{% translate "Gallery" %}{% endblock %}


{% block content %}

    {% for image in images %}
        <div class="modal fade" id="modalImage{{ image.id }}" tabindex="-1" role="dialog"
             aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">{{ image.date }}</h5>
                        <button type="button" class="close" data-bs-dismiss="modal"
                                aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <a href="{{ image.image.url }}">
                            <img src="{{ image.image.url }}" class="img-fluid" alt="">
                        </a>
                        {% if image.description %}
                            <p> {{ image.description }}</p>
                        {% endif %}

                    </div>
                    <div class="modal-footer">
                        {% url 'gallery:images:delete' image.id as url %}
                        <a
                            href="{{ url }}"
                            class="btn btn-primary"
                            hx-get="{{ url }}"
                            hx-target="#ajax-info-content"
                            data-bs-toggle="modal"
                            data-bs-target="#wger-ajax-info"
                        >
                            <span class="{% fa_class 'trash' %}"></span>
                        </a>

                        <a href="{% url 'gallery:images:edit' image.id %}" class="btn btn-primary">
                            <span class="{% fa_class 'edit' %}"></span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    {% endfor %}

    <div class="row">
        {% for image in images %}
            <div class="col-sm-6 col-lg-4 mb-4">
                <div class="card">
                    <a href="#" data-bs-toggle="modal" data-bs-target="#modalImage{{ image.id }}">
                        <img class="card-img-top" src="{{ image.image.url }}"
                             alt="{{ image.description }}">
                    </a>
                </div>
            </div>
        {% endfor %}
    </div>

{% endblock %}


{% block options %}
    <a href="{% url 'gallery:images:add' %}" class="btn btn-success btn-sm">
        {% translate "Add image" %}
    </a>
{% endblock %}
